<template>
	<uni-popup ref="shop_pop">
		<view class="shop4s">
			<view class="title">
				4S店
			</view>
			
				<view class="black_1">
					<template v-if="list.length>0">
						<view class="left">
							<scroll-view scroll-y="true" @scrolltolower="scroll" class="buyChicken_block_centent">
					
								<template v-for="(item,index) in list">
									<view class="item" @click="select(index)">
										<image class="img" :src="'/static/index/che/qiche_'+item.level+'.png'">
										</image>
										<image v-if="current == index" class="action" src="/static/index/caret_left.png">
										</image>
									</view>
								</template>
							</scroll-view>
						</view>
						<view class="right" >
						<view class="line_1">
							<text class="text1">{{list[current].name}}</text>
							<text class="text2">{{list[current].quota_num == 0?'不限量':'限量'+list[current].quota_num +'辆'}}</text>
						</view>
						<view class="line_2 line_5">
							售价：{{list[current].price}}U
						</view>
						<view class="line_2">
							收益：{{list[current].day_income}}/天
						</view>
						<view class="line_2">
							有效期：{{list[current].use_num}}天
						</view>
						<view class="line_2">
							油耗：{{list[current].consume_num}}L
						</view>
						<view class="line_3" @click="toPay(0)">
							购买
						</view>
						<view class="line_4" @click="toPay(1)">
							{{list[current].car_num}}碎片兑换
						</view>
					</view>
					</template>
					
				</view>
			
			
		</view>
		<view style="height: 20px;"></view>
		<view class="bottom">
			<image class="close" @click="close" src="/static/my/close2.png"></image>
		</view>
		<pay ref="pay" :success="getList"></pay>
	</uni-popup>
</template>

<script>
	import pay from '@/components/pay/pay.vue'

	export default {
		components: {
			pay
		},
		name: "shop4s",
		data() {
			return {
				current: 0,
				list: [
				// 	{
				// 	"id": 2,
				// 	"name": "B车",
				// 	"level": "2",
				// 	"price": "20.00",
				// 	"day_income": "2.00",
				// 	"use_num": 20,
				// 	"consume_num": 5,
				// 	"car_num": 400,
				// 	"quota_num": 0
				// },
				]
			};
		},
		onLoad() {
			
		},
		methods: {
			open() {
				this.$refs.shop_pop.open()
			
				this.getList()
			},
			close() {
				this.$refs.shop_pop.close()
			},
			select(index) {
				this.current = index
			},
			toPay(type) {
				this.$refs.pay.open(type,this.list[this.current])
			},
			getList() {
					this.list.length = 0
				var that = this
				
				this.api.http.requests('carshop/lists', {}, res => {
					
					that.list = res.data
					// if(res.data && res.data.length > 0){
					// 	that.list = res.data
					// }else{
					// 	// that.close()
					// }
					
				}, "POST")
			},
			scroll() {

			},
		}
	}
</script>

<style scoped lang="less">
	.shop4s {
		background: linear-gradient(295deg, #D2823A 0%, #EF9164 100%);
		border-radius: 10px;
		padding: 2px;

		.title {
			text-align: center;
			font-size: 49rpx;
			font-weight: 800;
			color: #FFFFFF;
			padding: 5px;
		}

		.black_1 {
			display: flex;
			background-color: #FBF8E7;
			border-radius: 10px;
			min-width: 300px;
			min-height: 300px;
			// margin: 2px;
			.left {
				margin: 10px;
				background-color: #DDD2C8;
				border-radius: 5px;

				.buyChicken_block_centent {
					height: 300px;
				}

				.item {
					display: flex;
					align-items: center;

					.img {
						width: 110px;
						height: 80px;
						margin: 0px 5px;
						border-bottom: 1px dashed gray;
					}

					.action {
						width: 20px;
						height: 20px;
					}
				}
			}

			.right {
				width: 150px;
				font-size: 26rpx;
				color: #242424;
				font-weight: 400;
				padding: 10px;

				.line_1 {
					margin-top: 15px;
					display: flex;
					justify-content: space-between;

					.text1 {
						margin-right: 20px;
						font-size: 32rpx;
						font-weight: 800;
					}

					.text2 {
						font-size: 25rpx;
						font-weight: 800;
						color: #9F5310;
					}
				}

				.line_5 {
					margin-top: 15px;
					font-size: 26rpx;
					font-weight: bold;
					color: #242424;
				}

				.line_2 {
					margin-top: 15px;
				}

				.line_3 {
					text-align: center;
					margin-top: 20px;
					padding: 8px 12px;
					background: #FE903D;
					border-radius: 18rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.line_4 {
					text-align: center;
					margin-top: 20px;
					padding: 8px 12px;
					font-size: 30rpx;
					font-weight: bold;
					color: #FE903D;
					border-radius: 18rpx;
					border: 2px solid #FE903D;
				}
			}
		}

	}

	.bottom {
		text-align: center;
	}

	.close {
		text-align: center;
		margin: auto;
		width: 30px;
		height: 30px;
	}
</style>